<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A demonstration of YAML's flexible grids</title>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="css/layout_grids2.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="css/patches/patch_grids2.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
	<li><a class="skip" href="#main" >Skip to main content (Press Enter).</a></li>
</ul>

<div class="page_margins">
  <div class="page">
    <div id="header" role="banner">
      <div id="topnav" role="contentinfo">
        <a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a>
      </div>
      <h1>A simple  sample page</h1>
      <h2>This sample page demonstrates  YAML's flexible grids. Try scaling ... </h2>
      <div class="subcolumns">
        <div class="c33l">
          <div id="nav" class="subcl" role="navigation">
            <h6>Example Navigation </h6>
            <ul>
              <li><a href="../index.html">Table Of Contents</a></li>
              <li><a href="equal_height_boxes.html">Next Example</a></li>
              <li><a href="flexible_grids.html">Previous Example</a>   </li>
            </ul>
          </div>
        </div>
        <div class="c33l" role="complementary">
          <div class="subc">
            <h6>And another box </h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat laboris nisi ut aliquip.</p>
          </div>
        </div>
        <div class="c33r"  role="complementary">
          <div class="subcr">
            <h6>This box is aligned with the sidebar </h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="main">
      <div class="subcolumns">
        <div class="c66l" role="main">
          <div class="subcl maincontent"><img src="images/test.jpg" alt="Test" class="float_left" />
            <p>Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>.  Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget  tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus  felis, a ultricies erat ipsum at metus.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida  non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet  malesuada, nisl purus fringilla odio, quis commodo est orci vitae  justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean  rutrum, magna non tristique posuere, erat odio eleifend nisl, non  convallis est tortor blandit ligula. Nulla id augue.</p>
            <p>Nullam  mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor  consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum  at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar  sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus  eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci.  Class aptent taciti sociosqu ad litora.</p>
            <p>Vivamus euismod. Cum  sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam  vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia  pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed,  diam. Mauris ante. Pellentesque habitant morbi tristique senectus et  netus et malesuada fames ac turpis egestas. Donec mattis. Morbi  dignissim sollicitudin libero. Nulla lorem.</p>
            <blockquote>
              <p>Integer  cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus  imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus  felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi,  mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae,  rhoncus eu, placerat ut, mi. Nulla nulla.</p>
            </blockquote>
            <p>Maecenas vel metus quis magna pharetra fermentum. <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit,  at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed  aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at  convallis tellus orci et nisl. Phasellus congue neque a lorem.</p>
            <hr/>
            <div class="subcolumns">
              <div class="c50l">
                <div class="subcl">
                  <h6>This is a nested column</h6>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
              </div>
              <div class="c50r">
                <div class="subcr">
                  <h6>This is another nested column </h6>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c33r" role="complementary">
          <div class="subcr">
            <h3>A <em>Simple</em> Sidebar </h3>
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede  sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi  vel augue.</p>
            <p>Mauris a lectus. Aliquam erat volutpat. Phasellus  ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis  elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat.  Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem  sagittis elit tincidunt gravida.</p>
            <p class="note">Vestibulum  ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia  Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet  vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
            <h3>Incremental leading</h3>
            <p class="small">Vestibulum ante ipsum  primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus  orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc.  Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar  neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus  tellus.</p>
            <p class="small">Vestibulum ante ipsum primis in  faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare  mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus  pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula,  lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras  ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus  tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet  vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue</p>
          </div>
        </div>
      </div>
    </div>
    <div id="footer" role="contentinfo">
      <h2>Open your mind for flexibility! There is a world far beyond simple column-based web design ...</h2>
      <p>Layout inspired <a href="http://www.yaml.de"></a>by <a href="http://files.bjorkoy.com/blueprint/tests/parts/sample.html">sample website</a> from <a href="http://code.google.com/p/blueprintcss/">Blueprint CSS</a><br />
        Rebuilt as an example, using grid elements of <a href="http://www.yaml.de/en/">YAML</a></p>
    </div>
  </div>
</div>
<!-- full skiplink functionality in webkit browsers -->
<script src="../../yaml/core/js/yaml-focusfix.js" type="text/javascript"></script>
</body>
</html>
